import { Image, List, InfiniteScroll } from 'antd-mobile'
// mock数据
// import { users } from './users'

import { fetchListAPI } from '@/apis/list'
import type { ListRes, ListItem } from '@/apis/list'
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'

// 定义参数类型
type Props = {
    channelId: string
}

const HomeList = (props: Props) => {
    // 解构参数
    const { channelId } = props
    // 获取列表数据
    const [listRes, setListRes] = useState<ListRes>({
        results: [],
        pre_timestamp: '' + Date.now()  // 直接返回当前时间戳
        // 先创建Date实例再调用实例方法
        // pre_timestamp: '' + new Date().getTime()
    })

    useEffect(() => {
        const getList = async () => {
            try {
                const res = await fetchListAPI({
                    channel_id: channelId,
                    timestamp: '' + Date.now()
                })
                setListRes({
                    results: res.data.data.results,
                    pre_timestamp: res.data.data.pre_timestamp
                })
            }
            catch (error) {
                throw new Error('文章列表获取失败')
            }
        }
        getList()
    }, [channelId])

    // 开关 标记当前是否还有新数据
    // 上拉加载触发的必要条件：1. hasMore = true 2. 小于threshold
    const [hasMore, setHasMore] = useState(true)
    // 加载下一页的函数
    const loadMore = async () => {
        // 编写加载下一页的核心逻辑
        // console.log('上拉加载触发了')
        try {
            const res = await fetchListAPI({
                channel_id: channelId,
                // 此值需要上一次网络请求里pre_timestamp的值, 用于请求下一段数据
                timestamp: listRes.pre_timestamp
            })
            // 把新老数据进行拼接 + 存入下一次请求的时间戳
            setListRes({
                results: [...listRes.results, ...res.data.data.results],
                pre_timestamp: res.data.data.pre_timestamp
            })
            // 停止监听
            if(!res.data.data.results.length){
                setHasMore(false)
            }
        }catch (error) {
            throw new Error('文章列表获取失败')
        }
    }

    const navigate = useNavigate()
    // 跳转到详情页面
    const goToDetail = (artId: string) => {
        navigate(`/detail?id=${artId}`)
    }
    return (
        <>
            <List>
                {listRes.results.map((item: ListItem) => (
                    <List.Item
                        onClick={() => goToDetail(item.art_id)}
                        key={item.art_id}
                        prefix={
                            <Image
                                // images: ["http://xxx.jpg"] 字符串数组的首个元素
                                // images[0] === "http://xxx.jpg"，图片有可能不存在
                                src={item.cover.images?.[0]}
                                style={{ borderRadius: 20 }}
                                fit="cover"
                                width={40}
                                height={40}
                            />
                        }
                        description={item.pubdate}
                    >
                        {item.title}
                    </List.Item>
                ))}
            </List>
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={10} />
        </>
    )
}

export default HomeList